<template>
  <div class="voice_list">
    <div class="voice_line" @click="play" :style="{ width: 25 + (audioData.duration * 75).toFixed(0) / 60 + '%' }">
      <div :class="['voicePlay_bg', { voicePlay: isPlaying }]"></div>
      <span class="voice_time">{{ (audioData.duration && (audioData.duration * 1).toFixed(0)) || 4 }}″</span>
    </div>
    <div class="voice_det" v-if="isDelete" @click="deleteVoice">
      <van-icon name="clear" size="26" color="#999999" />
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'MyVoice',
  components: {},
  props: {
    audioId: {
      type: String,
      default: '',
    },
    audioData: {
      type: Object,
      default: () => {
        return {
          id: '1',
          sourcePath: 'http://192.168.3.213:85/group1/M00/00/F8/wKgD1WAzk2-ALfIvAALgLIRI274323.mp3',
          duration: '24',
          show: true,
        }
      },
    },
    isDelete: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      isPlaying: false,
      audio: null,
    }
  },
  computed: {
    ...mapState(['currAudioId']),
  },
  watch: {
    currAudioId(newVal, oldVal) {
      //监控当前播放音频组件改变
      // if (oldVal === this.audioId) {
      //   //如果上次正在的播放的音频组件，就是这个组件，则停止播放，并初始化；
      //   this.isPlaying = false
      // }
      if (newVal !== 'none' && newVal === this.audioId) {
        //如果切换的播放的音频组件就是这个组件，则开始播放该音频
        this.toPlay()
      } else {
        this.pause()
      }
    },
  },
  created() {},
  mounted() {
    // document.addEventListener('visibilitychange', function() {
    //   console.log('visibilitychangevisibilitychangevisibilitychange')
    // })
  },
  methods: {
    ...mapMutations(['setCurrAudioId']),
    play() {
      if (this.currAudioId === this.audioId) {
        //如果当前播放的和当前点击播放是一个音频组件，则当前点击的是暂停的录音，故继续播放
        if (this.isPlaying) {
          this.pause()
          this.isPlaying = false
        } else {
          this.toPlay()
        }
      } else {
        //如果当前播放的和当前点击播放是不是一个音频组件，则更新当前播放音频组件id，并触发监控其改变的函数；
        this.setCurrAudioId(this.audioId)
        this.pause()
      }
    },
    toPlay() {
      let that = this
      this.isPlaying = true

      this.audio = new Audio()
      this.audio.src = this.audioData.sourcePath
      this.audio.play()
      this.audio.addEventListener('ended', function () {
        that.isPlaying = false
        setTimeout(() => {
          this.audio = ''
        }, 150)
      })
    },
    pause() {
      this.isPlaying = false
      if (this.audio) {
        this.audio.pause()
      }
    },
    deleteVoice() {
      this.$emit('delete', this.audioData)
    },
    timeFormat: function (time) {
      if (!time) return '00:00'
      let min = parseInt(time / 60)
      let sec = parseInt(time) % 60
      if (min < 10) min = '0' + min
      if (sec < 10) sec = '0' + sec
      return min + ':' + sec
    },
    handleVisiable(e) {
      if (e.target.visibilityState === 'visible') {
        // 要执行的方法
        console.log('要执行的方法Voice')
      }
    },
  },
  beforeDestroy() {
    this.pause()
  },
}
</script>

<style lang="scss" scoped>
.voice_list {
  width: 100%;
  height: 36px;
  display: flex;
  margin-bottom: 12px;
  .voice_line {
    padding-left: 10px;
    background-image: linear-gradient(#f1e0c6 50%, #d1b993);
    box-shadow: 3px 0 5px rgba($color: #d1b993, $alpha: 0.3);
    border-radius: 5px;
    width: 80%;
    display: flex;
    align-items: center;
    color: #333;
    .voicePlay_bg {
      background: url();
      width: 15px;
      height: 15px;
      background-size: 400%;
      margin-right: 5px;
      background-position: 100%;
    }
    .voice_time {
      font-size: 13px;
    }
  }

  .voice_det {
    width: 50px;
    text-align: center;
    line-height: 36px;
  }
}

.voicePlay {
  animation-name: voicePlay;
  animation-duration: 1s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: steps(3);
}

@keyframes voicePlay {
  0% {
    background-position: 0;
  }

  100% {
    background-position: 100%;
  }
}
.content-audio {
  display: none;
}
</style>
